<template>
  <div class="myxiaozhi" ref="xiaozhi">
    <van-nav-bar
      class="title"
      left-arrow
      title="小智同学"
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div class="content" ref="content">
      <!-- Left -->
      <!--<div class="sender" v-for="(item,index) in tulinglist" :key="index">
        <div>
          <img src="https://static.runoob.com/images/mix/img_avatar.png">
        </div>
        <div>
          <div class="left_triangle"></div>
          <span> {{item}} </span>
        </div>
      </div>-->
      <!-- Right -->
      <!--<div class="receiver" v-for="(item,index) in valueList" :key="index">
        <div>
          <img src="https://static.runoob.com/images/mix/img_avatar.png">
        </div>
        <div>
          <div class="right_triangle"></div>
          <span> {{item}} </span>
        </div>
      </div>-->
    </div>
    <!-- 底部输入框 -->
    <div class="input">
      <van-search v-model="value" show-action>
        <template #left-icon>
          <span></span>
        </template>
        <template #action>
          <div @click="onSearch" class="send">
            <span>发送</span>
          </div>
        </template>
      </van-search>
    </div>
  </div>
</template>

<script>
// import { tulingAPI } from '@/api/tuling'
import axios from 'axios'
import { mapState } from 'vuex'
import $ from 'jquery'
export default {
  name: 'myxiaozhi',
  data () {
    return {
      value: '', // 输入框
      timeID: '',
      scrollTop: 0
    }
  },
  watch: {
    scrollTop (newValue) {
      console.log(newValue)
      this.scrollToBottom()
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    this.scrollToBottom()
  },
  updated () {
    // this.scrollToBottom()
  },
  methods: {
    // 点击发送按钮
    onSearch () {
      const jsons = {
        reqType: 0,
        perception: {
          inputText: {
            text: this.value
          },
          inputImage: {
            url: ''
          },
          selfInfo: {
            location: {
              city: '广东',
              province: '深圳',
              street: '石岩街道'
            }
          }
        },
        userInfo: {
          apiKey: '5457165522f443fe91bb617b3da5e252',
          userId: 'xn'
        }
      }
      axios.post('/api', jsons).then(res => {
        $('.content').append('<div class="sender">\n' +
          '        <div>\n' +
          '          <img src="https://static.runoob.com/images/mix/img_avatar.png">\n' +
          '        </div>\n' +
          '        <div>\n' +
          '          <div class="left_triangle"></div>\n' +
          '          <span>' + res.data.results[0].values.text + '</span>\n' +
          '        </div>\n' +
          '      </div>')
        this.scrollToBottom()
      })
      $('.content').append('<div class="receiver">\n' +
        '        <div>\n' +
        '          <img src=" ' + this.userInfo.photo + ' ">\n' +
        '        </div>\n' +
        '        <div>\n' +
        '          <div class="right_triangle"></div>\n' +
        '          <span> ' + this.value + ' </span>\n' +
        '        </div>\n' +
        '      </div>')
      this.value = ''
      this.scrollToBottom()
    },
    onClickLeft () {
      this.$router.push('/my')
    },
    scrollToBottom () {
      this.$nextTick(() => {
        const box = this.$el.querySelector('.content')
        document.documentElement.scrollTop = box.scrollHeight
      })
    }
  }
}
</script>

<style lang="less" scoped>
.myxiaozhi {
  position: relative;
  padding-bottom: 20px;
  .title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #d0584d;
    color: #ffffff !important;
    ::v-deep .van-icon {
      color: #ffffff;
    }
    ::v-deep .van-nav-bar__title {
      color: #ffffff;
    }
  }
  .content {
    padding: 50px 20px 110px;
    margin-bottom:40px;
    ::v-deep .sender{
          clear:both;
        }
        ::v-deep .sender div:nth-of-type(1){
        float: left;
      }
    ::v-deep .sender div:nth-of-type(2){
      background-color: aquamarine;
      float: left;
      margin: 0 20px 10px 15px;
      padding: 10px 10px 10px 0px;
      border-radius:7px;
    }
    ::v-deep .receiver div:first-child img,
    ::v-deep .sender div:first-child img{
      width:50px;
      height: 50px;
    }
    ::v-deep .receiver{
      clear:both;
    }
    ::v-deep .receiver div:nth-child(1){
      float: right;
    }
    ::v-deep .receiver div:nth-of-type(2){
      float:right;
      background-color: gold;
      margin: 0 10px 10px 20px;
      padding: 10px 0px 10px 10px;
      border-radius:7px;
    }

    ::v-deep .left_triangle{
      height:0px;
      width:0px;
      border-width:8px;
      border-style:solid;
      border-color:transparent aquamarine transparent transparent;
      position: relative;
      left:-16px;
      top:3px;
    }

    ::v-deep .right_triangle{
      height:0px;
      width:0px;
      border-width:8px;
      border-style:solid;
      border-color:transparent transparent transparent gold;
      position: relative;
      right:-16px;
      top:3px;
    }
  }
  .input {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .send {
      height: 35px;
      width: 60px;
      background-color: #07c160;
      color: #ffffff;
      span {
        text-align: center;
        padding-left: 18px;
        font-size: 12px;
      }
    }
  }
}
</style>
